import React, { Component } from 'react';
import Home from './children/Home';
import { ThemeContext } from './context/theme-context'
import { UserContext } from './context/user-context'
import Profile from './children/Profile';
class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      info: {
        name: '张三',
        age: 18
      }
    }
  }

  render() { 
    const { info } = this.state;
    return ( 
      <div>
        <h1>App</h1>
        {/* 小语法：属性展开 */}
        {/* <Home {...info}/> */}

        {/* Context提供了一种在组件之间共享值的方式，而不必显式地通过组件数逐层传递 */}
        {/* 使用Context.provider的value属性为后代提供数据 */}
        <ThemeContext.Provider value={{color: 'red', size: 30}}>
          {/* 传入多个context，嵌套使用 */}
          <UserContext.Provider value={{nickName: '夜斗', age: 18}}>
            <Home/>
          </UserContext.Provider>
        </ThemeContext.Provider>
        
        {/* 当组件没有被context包裹时，可以使用context中的默认数据 */}
        <Profile/>
      </div>
     );
  }
}
 
export default App;